<template>
  <div>
    <div style="height:80px">
  <el-form :inline="true" class="demo-form-inline">
  <el-form-item>
    <el-input v-model="map.findid" placeholder="档案号"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input v-model="map.findname" placeholder="姓名"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input v-model="map.findphone" placeholder="手机号"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="selbespeakall()">查询</el-button>
  </el-form-item>
  <el-button type="warning" @click="selmealmem()">新增预约</el-button>
</el-form>
</div>
<div>
    <el-table
    :data="page.rows"
    border
    style="width: 100%">
    <el-table-column
      prop="besTime"
      label="预约时间"
      width="220"
      align="center">
    </el-table-column>
    <el-table-column
      prop="besId"
      label="档案号"
      width="170"
      align="center">
    </el-table-column>
    <el-table-column
      prop="besName"
      label="姓名"
      width="160"
      align="center">
    </el-table-column>
    <el-table-column
      prop="besPhone"
      label="手机号码"
      width="180"
      align="center">
    </el-table-column>
    <el-table-column
      prop="besTypeId"
      label="预约类型"
      width="170"
      align="center">
    </el-table-column>
    <el-table-column
      prop="besState"
      label="预约状态"
      width="128"
      align="center">
    </el-table-column>
    <el-table-column
      label="操作"
      width="200"
      align="center"
      prop="besId">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="appointmentdetails(scope.row.besId)">预约详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <div class="block">
    <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5, 9, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
      </el-pagination>
  </div>

  <el-dialog
  title="预约信息"
  :visible.sync="details"
  width="50%"
  center>
  <el-descriptions class="margin-top" :column="2" border>
    <el-descriptions-item>
      <template slot="label">
        姓名
      </template>
      {{bespeak.besName}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        手机号
      </template>
      {{bespeak.besPhone}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        性别
      </template>
      {{bespeak.besGender}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        出生日期
      </template>
      {{bespeak.besBirthday}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        所用账号
      </template>
      {{bespeak.member.memName}}
    </el-descriptions-item>
  </el-descriptions>
  <el-card class="box-card" style="font-size: 17px">
  <div slot="header" class="clearfix">
    <span>{{bespeak.bespeakSetMeal.besSmName}}</span>
  </div>
  <div>
    <el-table
    :data="bespeak.bespeakSetMeal.list"
    height="200"
    border
    style="width: 100%">
    <el-table-column
      prop="besProName"
      label="项目名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="besProPrice"
      label="项目价格"
      width="180">
    </el-table-column>
    <el-table-column
      prop="bespeakPojectType.besProTypeName"
      label="项目类型">
    </el-table-column>
  </el-table>
  </div>
</el-card>
  <span slot="footer" class="dialog-footer">
    <el-button @click="details = false">返 回</el-button>
  </span>
</el-dialog>

<el-dialog title="新增预约" :visible.sync="addbespeakpage" width="1200px" center >
  <el-row>
  <el-col :span="12"><div>
    <el-form :model="bespeakadd" :rules="rules" ref="bespeakadd"
  label-width="100px" class="demo-ruleForm"
  label-position="left" inline-message>
      <el-form-item label="会员账号" prop="memId">
        <el-select v-model="bespeakadd.memId" filterable placeholder="请选择" style="width: 250px">
          <el-option
            v-for="member in members"
            :key="member.memId"
            :label="member.memName"
            :value="member.memId">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="预约人姓名" prop="besName">
            <el-input v-model="bespeakadd.besName" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="besGender">
          <el-radio-group v-model="bespeakadd.besGender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="besPhone">
          <el-input v-model="bespeakadd.besPhone" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="besIdentity">
          <el-input v-model="bespeakadd.besIdentity" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="婚姻状态" prop="besWedlock">
          <el-radio-group v-model="bespeakadd.besWedlock">
            <el-radio label="未婚"></el-radio>
            <el-radio label="已婚"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预约类型" prop="besTypeId">
          <el-select v-model="bespeakadd.besTypeId" placeholder="请选择预约类型" style="width: 250px">
          <el-option label="入职体检" value="1"></el-option>
          <el-option label="健康体检" value="2"></el-option>
          <el-option label="从业体检" value="3"></el-option>
          <el-option label="征兵体检" value="4"></el-option>
          <el-option label="学生体检" value="5"></el-option>
          <el-option label="职业病体检" value="6"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="预约时间" prop="besTime">
          <el-date-picker
            v-model="bespeakadd.besTime"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div></el-col>
    <el-col :span="12"><div>
    <el-table
          ref="singleTable"
          :data="meals"
          highlight-current-row
          @current-change="addmeal"
          style="width: 100%"
          height="400px">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
           <el-table-column
            prop="besSmName"
            label="套餐名称"
            width="330">
          </el-table-column>
          <el-table-column
            prop="besSmPrice"
            label="套餐价格"
            width="90">
          </el-table-column>
          <el-table-column
            prop="besSmApply"
            label="适用人群">
          </el-table-column>
        </el-table>
    </div></el-col>
</el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="clearbespeak">取 消</el-button>
      <el-button type="primary" @click="addbespeak()">预约</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default ({
  name: 'bespeakList',
  data () {
    var checkTime = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择预约时间'))
      } else {
        if (this.bespeakadd.besTime !== '') {
          this.$axios.post(`/api/bespeak/yanzhengTime?besTime=${this.bespeakadd.besTime}`).then(({data}) => {
            if (data == null || data === '' || data === 'null') {
              callback(new Error('当天未设置预约，请重新选择！'))
            } else {
              if (data.sinDayAppCanapp === data.sinDayAppApp) {
                callback(new Error('当天预约人数已满，请重新选择！'))
              } else {
                this.$message({
                  message: '当天可以预约，还可预约人数：' + (data.sinDayAppCanapp - data.sinDayAppApp) + ' 人',
                  type: 'success'
                })
                callback()
              }
            }
          })
        }
      }
    }
    return {
      value: '',
      details: false,
      addbespeakpage: false,
      map: {
        index: '',
        findid: '',
        findname: '',
        findphone: ''
      },
      page: {},
      currentPage: 1,
      pageSize: 5,
      bespeak: {
        member: {
          memName: ''
        },
        bespeakSetMeal: {
          besSmName: ''
        }
      },
      bespeakadd: {
        besName: '',
        besIdentity: '',
        besPhone: '',
        besGender: '',
        besWedlock: '',
        besTime: '',
        besSmId: '',
        besTypeId: '',
        memId: ''
      },
      meals: [],
      members: [],
      rules: {
        besName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        besTypeId: [
          { required: true, message: '请选择预约类型', trigger: 'change' }
        ],
        besGender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        besWedlock: [
          { required: true, message: '请选择婚姻情况', trigger: 'change' }
        ],
        memId: [
          { required: true, message: '请选择会员账号', trigger: 'change' }
        ],
        besTime: [
          { validator: checkTime, trigger: 'blur' }
        ],
        besIdentity: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 18, max: 18, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        besPhone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }
        ]
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < (Date.now() - 86400000)
        }
      }
    }
  },
  methods: {
    selbespeakall () {
      this.map.index = this.currentPage
      this.map.pageSize = this.pageSize
      axios.post('/api/bespeak/selbespeakall', this.map).then(result => {
        this.page = result.data
        this.showbesTypeId()
      })
    },
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.selbespeakall()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.selbespeakall()
    },
    showbesTypeId () {
      this.page.rows.forEach((e, i) => {
        switch (e.besTypeId) {
          case 1 :
            e.besTypeId = '入职体检'
            break
          case 2 :
            e.besTypeId = '健康体检'
            break
          case 3 :
            e.besTypeId = '从业体检'
            break
          case 4 :
            e.besTypeId = '征兵体检'
            break
          case 5 :
            e.besTypeId = '学生体检'
            break
          case 6 :
            e.besTypeId = '职业病体检'
            break
        }
        switch (e.besState) {
          case 0 :
            e.besState = '已预约'
            break
          case 1 :
            e.besState = '预约成功'
            break
          case 2 :
            e.besState = '预约失败'
            break
          case 3 :
            e.besState = '预约取消'
            break
        }
      })
    },
    appointmentdetails (val) {
      axios.get('/api/bespeak/appointmentdetails/' + val).then(result => {
        this.bespeak = result.data
        // console.log(this.bespeak)
      })
      this.details = true
    },
    selmealmem () {
      axios.post('/api/bespeak/selmeals').then(result => {
        this.meals = result.data
      })
      axios.post('/api/bespeak/selmember').then(result => {
        this.members = result.data
      })
      this.addbespeakpage = true
    },
    addmeal (val) {
      this.bespeakadd.besSmId = val.besSmId
    },
    addbespeak () {
      if (this.bespeakadd.besSmId === '') {
        alert('请选择体检套餐')
      } else {
        this.$refs.bespeakadd.validate((valid) => {
          if (valid) {
            console.log(this.bespeakadd)
            axios.post('/api/bespeak/addbespeak', this.bespeakadd).then(result => {
              this.clearbespeak()
              if (result.data) {
                this.$message({
                  message: '预约成功！',
                  type: 'success'
                })
              } else {
                this.$message.error('预约失败，当日预约人数不足')
              }
              this.selbespeakall()
            })
          }
        })
      }
    },
    clearbespeak () {
      this.addbespeakpage = false
      this.$refs.bespeakadd.resetFields()
    }
  },
  created () {
    this.selbespeakall()
  }
})
</script>

<style scoped>

</style>
